<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<uv-navbar 
			title="我的" 
			bg-color="transparent" 
			placeholder 
			:border="false"
			:title-bold="true"
			safeAreaInsetTop>
		</uv-navbar>
		
		
		<!-- 用户信息卡片 -->
		<view class="user-card" @click="navigateTo('login')">
			<view class="user-info">
				<image class="avatar" :src="avatarUrl || '/static/images/default-avatar.png'" mode="aspectFill" @click="navigateTo('login')" />
				<view class="info">
					<text class="name">{{ username || '点击登录' }}</text>
					<text class="phone" v-if="phone">{{ phone }}</text>
					<text class="welcome" v-else>登录后享受更多服务</text>
				</view>
				<uv-icon 
					name="arrow-right" 
					color="#999" 
					size="18"
					>
				</uv-icon>
			</view>
		</view>
		
		<!-- 订单状态快捷入口 -->
		<view class="quick-actions">
			<view 
				class="action-item" 
				v-for="action in actions" 
				:key="action.type"
				@click="navigateTo(action.page)">
				<view class="action-icon">
					<image :src="action.icon" mode="aspectFill" />
				</view>
				<text class="action-text">{{ action.text }}</text>
				<view class="action-badge" v-if="getOrderCount(action.type) > 0">
					{{ getOrderCount(action.type) }}
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="section-title">常用功能</view>
			<view class="menu-grid">
				<view 
					class="menu-item" 
					v-for="item in menuItems" 
					:key="item.page"
					@click="navigateTo(item.page)">
					<image class="menu-icon" :src="item.icon" mode="aspectFill" />
					<text class="menu-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区域 -->
		<view class="safe-area"></view>
	</view>
	
	<tabBarVue :current="current"></tabBarVue>
</template>

<script>
	import { mapState } from 'pinia'
	import { useUserInfoStore } from '../../../stores/userInfo.js'
	import tabBarVue from '../../../components/tabbar/tabbar.vue';

	export default {
		data() {
			return {
				current: 2,
				orderCounts: {
					all: 0,
					pendingPayment: 0,
					pendingShipment: 0,
					completed: 0
				},
				actions: [
					{ 
						text: '全部订单', 
						icon: '/static/images/all_orders.png',
						page: 'allOrders',
						type: 'all'
					},
					{ 
						text: '待付款', 
						icon: '/static/images/pending_payment.png',
						page: 'pendingPayment',
						type: 'pendingPayment'
					},
					{ 
						text: '待出行', 
						icon: '/static/images/pending_shipment.png',
						page: 'pendingShipment',
						type: 'pendingShipment'
					},
					{ 
						text: '已完成', 
						icon: '/static/images/finished.png',
						page: 'finished',
						type: 'completed'
					}
				],
				menuItems: [
					{ 
						text: '个人信息', 
						icon: '/static/images/personal_info.png',
						page: 'personalInfo'
					},
					{ 
						text: '用户协议', 
						icon: '/static/images/user_agreement.png',
						page: 'userAgreement'
					},
					{ 
						text: '设置', 
						icon: '/static/images/setting.png',
						page: 'settings'
					},
					{ 
						text: '帮助中心', 
						icon: '/static/images/help.png',
						page: 'help'
					}
				]
			};
		},
		computed: {
			...mapState(useUserInfoStore, ['userId', 'phone', 'username', 'avatarUrl']),
		},
		components: {
			tabBarVue
		},
		onShow() {
			this.current = 2;
			this.fetchOrderCounts();
		},
		methods: {
			// 获取订单数量
			getOrderCount(type) {
				return this.orderCounts[type] || 0;
			},
			
			// 获取最新订单数据
			async fetchOrderCounts() {
				if (!this.userId) {
					// 未登录状态重置为0
					this.orderCounts = {
						all: 0,
						pendingPayment: 0,
						pendingShipment: 0,
						completed: 0
					};
					return;
				}
				const formData = {
				  id: this.userId,
				};
				console.log(formData)
				try {
					// 这里替换为实际的API调用
					const res = await uni.request({
						url: '/api/tourist/orders/count',
						method: 'POST',
						data: formData
					});
					console.log(res.data.data)
					
					this.orderCounts = res.data.data;;
				} catch (error) {
					console.error('获取订单数量失败:', error);
				}
			},
			navigateTo(page) {
				// 原有导航逻辑保持不变
				switch (page) {
					case 'login':
						if (!this.userId) {
							uni.navigateTo({
								url: '/common/pages/my/login'  
							});
						} else {
							uni.navigateTo({
								url: '/pages/user/userInfo/userInfo'
							});
						}
						break;
					case 'allOrders':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab=全部订单'
						});
						break;
					case 'pendingPayment':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab=待支付'
						});
						break;
					case 'pendingShipment':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab=待出行'
						});
						break;
					case 'finished':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab=已完成'
						});
						break;
					case 'personalInfo':
						if (this.userId) {
							uni.navigateTo({
								url: '/pages/user/userInfo/userInfo'
							});
						} else {
							uni.navigateTo({
								url: '/common/pages/my/login'  
							});
						}
						break;
					case 'userAgreement':
						uni.navigateTo({
							url: '/pages/user/userAgreement/userAgreement'
						});
						break;
					case 'settings':
						uni.showToast({
						  title: '尽情期待',
						  icon: 'loading'
						});
						break;
					case 'help':
						uni.showToast({
						  title: '请联系管理员3244969732',
						  icon: 'none'
						});
						break;
					default:
						console.warn('Unknown page:', page);
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
			background: linear-gradient(to bottom, #4a90e2, #f5f7fa);
			min-height: 100vh;
			padding: 20rpx 24rpx;
		}
		
		.user-card {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
		}
		
		.quick-actions {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 24rpx;
			padding: 30rpx 0;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-around;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
		}
		
		.menu-section {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 24rpx;
			padding: 32rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
		}
	
	.user-info {
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}
	
	.info {
		flex: 1;
		margin-left: 28rpx;
		display: flex;
		flex-direction: column;
	}
	
	.name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.phone, .welcome {
		font-size: 28rpx;
		color: #666;
	}
	
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	
	.action-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.action-text {
		font-size: 26rpx;
		color: #555;
	}
	
	.action-badge {
		position: absolute;
		top: -10rpx;
		right: 0;
		background: #f56c6c;
		color: #fff;
		font-size: 20rpx;
		border-radius: 50%;
		min-width: 36rpx;
		height: 36rpx;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		/* 确保数字较长时也能正常显示 */
		line-height: 36rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 32rpx;
	}
	
	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
	}
	
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.menu-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}
	
	.menu-text {
		font-size: 26rpx;
		color: #555;
		text-align: center;
	}
	
	.safe-area {
		height: env(safe-area-inset-bottom);
	}
</style>